<template>
  <section 
    id="hero" 
    :class="`pt-32 pb-20 md:pt-40 md:pb-32 ${backgroundType === 'gradient' ? 'bg-gradient-to-br' : ''}`"
    :style="getBackgroundStyles()"
  >
    <!-- 加载状态遮罩 -->
    <div v-if="isLoading" class="absolute inset-0 bg-white/80 flex items-center justify-center z-50">
      <div class="flex flex-col items-center">
        <div class="w-12 h-12 border-4 border-primary border-t-transparent rounded-full animate-spin mb-4"></div>
        <p class="text-dark">数据加载中...</p>
      </div>
    </div>
    
    <!-- 刷新按钮 -->
    <button 
      v-if="dataSourceUrl" 
      @click="refresh" 
      class="absolute top-4 right-4 p-2 rounded-full bg-white shadow-md hover:bg-primary hover:text-white transition-all duration-300 z-40"
      title="刷新数据"
    >
      <i class="fa fa-refresh"></i>
    </button>
    <div class="container mx mx-auto px-4 sm:px-6 lg:px-8">
      <div class="flex flex-col lg:flex-row items-center">
        <!-- 左侧内容区域 -->
        <div class="w-full lg:w-1/2 mb-12 lg:mb-0" :class="contentAlignment">
          <!-- 标签 -->
          <span 
            v-if="showTag"
            class="inline-block px-4 py-1 rounded-full text-sm font-medium mb-6 transition-all duration-300"
            :style="{
              backgroundColor: `${primaryColor}20`,
              color: primaryColor
            }"
          >
            {{ tagText }}
          </span>
          
          <!-- 标题 -->
          <h1 
            class="text-[clamp(2rem,5vw,3.5rem)] font-bold leading-tight text-dark mb-6 transition-all duration-300"
            :style="titleStyle"
          >
            <template v-for="(line, index) in titleLines" :key="index">
              <span v-if="index > 0"><br></span>
              <span 
                v-if="line.highlight" 
                :style="{ color: highlightColor }"
              >
                {{ line.text }}
              </span>
              <span v-else>{{ line.text }}</span>
            </template>
          </h1>
          
          <!-- 描述文本 -->
          <p 
            class="text-lg text-dark/70 mb-8 max-w-xl transition-all duration-300"
            :style="descriptionStyle"
          >
            {{ description }}
          </p>
          
          <!-- 按钮区域 -->
          <div class="flex flex-col sm:flex-row gap-4 mb-8">
            <a 
              :href="primaryButton.link"
              class="px-8 py-3 rounded-lg text-center transition-all duration-300 font-medium"
              :style="getPrimaryButtonStyles()"
              @click.prevent="handleButtonClick('primary')"
            >
              {{ primaryButton.text }}
            </a>
            <a 
              v-if="showSecondaryButton"
              :href="secondaryButton.link"
              class="px-8 py-3 rounded-lg text-center transition-all duration-300 font-medium"
              :style="getSecondaryButtonStyles()"
              @click.prevent="handleButtonClick('secondary')"
            >
              {{ secondaryButton.text }}
            </a>
          </div>
          
          <!-- 客户标志区域 -->
          <div v-if="showClientLogos" class="mt-16">
            <p class="text-sm text-dark/50 mb-4">{{ clientsTitle }}</p>
            <div class="flex flex-wrap items-center gap-8 opacity-70">
              <img 
                v-for="(client, index) in clients" 
                :key="index"
                :src="client.logoUrl" 
                :alt="client.name" 
                class="h-6 object-contain transition-transform hover:scale-110"
                @error="handleImageError($event, index)"
              >
            </div>
          </div>
        </div>
        
        <!-- 右侧图片区域 -->
        <div class="w-full lg:w-1/2 relative">
          <!-- 主图片 -->
          <div 
            class="relative z-10 rounded-2xl overflow-hidden shadow-2xl transition-all duration-500 hover:shadow-primary/20"
            :style="{ transform: imageHoverEffect ? 'translateY(-5px)' : 'none' }"
          >
            <img 
              :src="mainImageUrl" 
              :alt="mainImageAlt" 
              class="w-full h-auto transition-all duration-700"
              :style="{ transform: imageHoverEffect ? 'scale(1.03)' : 'none' }"
              @error="handleMainImageError"
            >
          </div>
          
          <!-- 装饰元素 -->
          <div 
            v-if="showDecorations"
            class="absolute -bottom-6 -left-6 w-32 h-32 rounded-full z-0 transition-all duration-500"
            :style="{ backgroundColor: `${accentColor}10` }"
          ></div>
          <div 
            v-if="showDecorations"
            class="absolute -top-6 -right-6 w-40 h-40 rounded-full z-0 transition-all duration-500"
            :style="{ backgroundColor: `${primaryColor}10` }"
          ></div>
          
          <!-- 悬浮数据卡片 1 -->
          <div 
            v-if="showStatCards && stats.length >= 1"
            class="absolute top-1/4 -left-10 bg-white p-4 rounded-lg shadow-lg z-20 hidden md:block transition-all duration-300 hover:shadow-xl"
          >
            <div class="flex items-center">
              <div 
                class="w-10 h-10 rounded-full flex items-center justify-center mr-3"
                :style="{ 
                  backgroundColor: `${stats[0].color}10`,
                  color: stats[0].color
                }"
              >
                <i class="fa" :class="stats[0].icon"></i>
              </div>
              <div>
                <p class="text-sm text-dark/60">{{ stats[0].label }}</p>
                <p class="font-bold text-lg">{{ stats[0].value }}</p>
              </div>
            </div>
          </div>
          
          <!-- 悬浮数据卡片 2 -->
          <div 
            v-if="showStatCards && stats.length >= 2"
            class="absolute bottom-1/3 -right-10 bg-white p-4 rounded-lg shadow-lg z-20 hidden md:block transition-all duration-300 hover:shadow-xl"
          >
            <div class="flex items-center">
              <div 
                class="w-10 h-10 rounded-full flex items-center justify-center mr-3"
                :style="{ 
                  backgroundColor: `${stats[1].color}10`,
                  color: stats[1].color
                }"
              >
                <i class="fa" :class="stats[1].icon"></i>
              </div>
              <div>
                <p class="text-sm text-dark/60">{{ stats[1].label }}</p>
                <p class="font-bold text-lg">{{ stats[1].value }}</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
</template>

<script>
export default {
  name: 'Hero',
  // 低代码平台元数据
  lowcode: {
    meta: {
      name: 'hero',
      displayName: '英雄区域模块',
      description: '页面顶部的核心展示区域，用于传达核心价值主张',
      icon: 'fa-flag',
      category: '布局组件',
      version: '1.0.0',
      isContainer: false
    },
    
    configPanel: [
      {
        title: '基本配置',
        fields: [
          {
            name: 'primaryColor',
            label: '主题色',
            type: 'color',
            defaultValue: '#165DFF'
          },
          {
            name: 'accentColor',
            label: '强调色',
            type: 'color',
            defaultValue: '#36CFC9'
          },
          {
            name: 'highlightColor',
            label: '高亮文本色',
            type: 'color',
            defaultValue: '#165DFF'
          },
          {
            name: 'backgroundType',
            label: '背景类型',
            type: 'select',
            options: [
              { label: '纯色', value: 'solid' },
              { label: '渐变色', value: 'gradient' }
            ],
            defaultValue: 'gradient'
          },
          {
            name: 'bgColor',
            label: '背景色',
            type: 'color',
            defaultValue: '#ffffff'
          },
          {
            name: 'bgColor2',
            label: '渐变背景色2',
            type: 'color',
            defaultValue: '#f0f7ff'
          }
        ]
      },
      {
        title: '内容配置',
        fields: [
          {
            name: 'showTag',
            label: '显示标签',
            type: 'boolean',
            defaultValue: true
          },
          {
            name: 'tagText',
            label: '标签文本',
            type: 'text',
            defaultValue: '企业数字化转型专家'
          },
          {
            name: 'titleLines',
            label: '标题行',
            type: 'array',
            description: '标题的每行文本，可设置是否高亮',
            defaultValue: [
              { text: '用智能科技', highlight: false },
              { text: '连接企业未来', highlight: true }
            ]
          },
          {
            name: 'description',
            label: '描述文本',
            type: 'textarea',
            defaultValue: '我们提供一站式企业数字化解决方案，从战略咨询到技术实施，助力企业在数字时代保持竞争力，实现可持续发展。'
          },
          {
            name: 'contentAlignment',
            label: '内容对齐方式',
            type: 'select',
            options: [
              { label: '左对齐', value: 'text-left' },
              { label: '居中对齐', value: 'text-center' },
              { label: '右对齐', value: 'text-right' }
            ],
            defaultValue: 'text-left'
          }
        ]
      },
      {
        title: '按钮配置',
        fields: [
          {
            name: 'primaryButton',
            label: '主按钮',
            type: 'object',
            properties: [
              { name: 'text', label: '按钮文本', type: 'text', defaultValue: '了解服务' },
              { name: 'link', label: '链接地址', type: 'text', defaultValue: '#services' },
              { name: 'buttonStyle', label: '按钮样式', type: 'select', options: [
                { label: '填充', value: 'filled' },
                { label: '圆角', value: 'rounded' },
                { label: '扁平', value: 'flat' }
              ], defaultValue: 'filled' }
            ]
          },
          {
            name: 'showSecondaryButton',
            label: '显示次要按钮',
            type: 'boolean',
            defaultValue: true
          },
          {
            name: 'secondaryButton',
            label: '次要按钮',
            type: 'object',
            properties: [
              { name: 'text', label: '按钮文本', type: 'text', defaultValue: '预约演示' },
              { name: 'link', label: '链接地址', type: 'text', defaultValue: '#contact' }
            ]
          }
        ]
      },
      {
        title: '图片配置',
        fields: [
          {
            name: 'mainImageUrl',
            label: '主图片URL',
            type: 'text',
            defaultValue: 'https://picsum.photos/seed/hero/800/600'
          },
          {
            name: 'mainImageAlt',
            label: '图片描述',
            type: 'text',
            defaultValue: '智联科技解决方案'
          },
          {
            name: 'imageHoverEffect',
            label: '图片悬停效果',
            type: 'boolean',
            defaultValue: true
          },
          {
            name: 'showDecorations',
            label: '显示装饰元素',
            type: 'boolean',
            defaultValue: true
          }
        ]
      },
      {
        title: '统计卡片配置',
        fields: [
          {
            name: 'showStatCards',
            label: '显示统计卡片',
            type: 'boolean',
            defaultValue: true
          },
          {
            name: 'stats',
            label: '统计数据',
            type: 'array',
            defaultValue: [
              {
                label: '业务增长',
                value: '+128%',
                icon: 'fa-line-chart',
                color: '#22c55e'
              },
              {
                label: '客户满意度',
                value: '98.7%',
                icon: 'fa-users',
                color: '#3b82f6'
              }
            ]
          }
        ]
      },
      {        title: '客户标志配置',        fields: [          {            name: 'showClientLogos',            label: '显示客户标志',            type: 'boolean',            defaultValue: true          },          {            name: 'clientsTitle',            label: '客户标题',            type: 'text',            defaultValue: '值得信赖的合作伙伴'          },          {            name: 'clients',            label: '客户列表',            type: 'array',            defaultValue: [              { name: '客户1', logoUrl: 'https://picsum.photos/seed/client1/120/40' },              { name: '客户2', logoUrl: 'https://picsum.photos/seed/client2/120/40' },              { name: '客户3', logoUrl: 'https://picsum.photos/seed/client3/120/40' },              { name: '客户4', logoUrl: 'https://picsum.photos/seed/client4/120/40' },              { name: '客户5', logoUrl: 'https://picsum.photos/seed/client5/120/40' }            ]          }        ]      },
      {
        title: '数据源配置',
        fields: [
          {
            name: 'dataSourceUrl',
            label: '数据源URL',
            type: 'text',
            description: 'API接口地址，用于动态加载Hero区域数据'
          },
          {
            name: 'autoLoad',
            label: '自动加载',
            type: 'boolean',
            defaultValue: true,
            description: '组件挂载时是否自动加载数据'
          }
        ]
      }
    ],
    
    events: [
      {
        name: 'primaryButtonClick',
        label: '主按钮点击',
        description: '点击主按钮时触发',
        parameters: [
          { name: 'button', type: 'object', description: '按钮配置信息' }
        ]
      },
      {
        name: 'secondaryButtonClick',
        label: '次要按钮点击',
        description: '点击次要按钮时触发',
        parameters: [
          { name: 'button', type: 'object', description: '按钮配置信息' }
        ]
      },
      {
        name: 'imageError',
        label: '图片加载失败',
        description: '图片加载失败时触发',
        parameters: [
          { name: 'index', type: 'number', description: '图片索引，-1表示主图' },
          { name: 'error', type: 'object', description: '错误信息' }
        ]
      },
      {
        name: 'dataLoaded',
        label: '数据加载成功',
        description: '从API加载数据成功时触发',
        parameters: [
          { name: 'data', type: 'object', description: '加载到的数据' }
        ]
      },
      {
        name: 'dataLoadError',
        label: '数据加载失败',
        description: '从API加载数据失败时触发',
        parameters: [
          { name: 'error', type: 'object', description: '错误信息' }
        ]
      }
    ],
    
    actions: [
      {
        name: 'setPrimaryColor',
        label: '设置主题色',
        description: '动态修改主题色',
        parameters: [
          { name: 'color', type: 'string', required: true, description: '颜色值' }
        ]
      },
      {
        name: 'updateTitle',
        label: '更新标题',
        description: '动态更新标题内容',
        parameters: [
          { name: 'titleLines', type: 'array', required: true, description: '标题行数组' }
        ]
      },
      {
        name: 'setBackgroundType',
        label: '设置背景类型',
        description: '切换背景为纯色或渐变色',
        parameters: [
          { name: 'type', type: 'string', required: true, description: '类型：solid 或 gradient' }
        ]
      },
      {
        name: 'loadData',
        label: '加载数据',
        description: '从指定的数据源URL加载数据',
        parameters: [
          { name: 'url', type: 'string', description: '可选的数据源URL，默认使用组件配置的dataSourceUrl' }
        ]
      },
      {
        name: 'refreshData',
        label: '刷新数据',
        description: '重新从数据源加载数据'
      }
    ]
  },
  
  props: {
    // 数据源配置
    dataSourceUrl: {
      type: String,
      default: ''
    },
    autoLoad: {
      type: Boolean,
      default: true
    },
    
    // 颜色配置
    primaryColor: {
      type: String,
      default: '#165DFF'
    },
    accentColor: {
      type: String,
      default: '#36CFC9'
    },
    highlightColor: {
      type: String,
      default: '#165DFF'
    },
    backgroundType: {
      type: String,
      default: 'gradient',
      validator: (value) => ['solid', 'gradient'].includes(value)
    },
    bgColor: {
      type: String,
      default: '#ffffff'
    },
    bgColor2: {
      type: String,
      default: '#f0f7ff'
    },
    
    children: {
      type: Array,
      default: () => []
    },
    // 内容配置
    showTag: {
      type: Boolean,
      default: true
    },
    tagText: {
      type: String,
      default: '企业数字化转型专家'
    },
    titleLines: {
      type: Array,
      default: () => [
        { text: '用智能科技', highlight: false },
        { text: '连接企业未来', highlight: true }
      ]
    },
    description: {
      type: String,
      default: '我们提供一站式企业数字化解决方案，从战略咨询到技术实施，助力企业在数字时代保持竞争力，实现可持续发展。'
    },
    contentAlignment: {
      type: String,
      default: 'text-left',
      validator: (value) => ['text-left', 'text-center', 'text-right'].includes(value)
    },
    
    // 按钮配置
    primaryButton: {
      type: Object,
      default: () => ({
        text: '了解服务',
        link: '#services',
        buttonStyle: 'filled'
      })
    },
    showSecondaryButton: {
      type: Boolean,
      default: true
    },
    secondaryButton: {
      type: Object,
      default: () => ({
        text: '预约演示',
        link: '#contact'
      })
    },
    
    // 图片配置
    mainImageUrl: {
      type: String,
      default: 'https://picsum.photos/seed/hero/800/600'
    },
    mainImageAlt: {
      type: String,
      default: '智联科技解决方案'
    },
    imageHoverEffect: {
      type: Boolean,
      default: true
    },
    showDecorations: {
      type: Boolean,
      default: true
    },
    
    // 统计卡片配置
    showStatCards: {
      type: Boolean,
      default: true
    },
    stats: {
      type: Array,
      default: () => [
        {
          label: '业务增长',
          value: '+128%',
          icon: 'fa-line-chart',
          color: '#22c55e'
        },
        {
          label: '客户满意度',
          value: '98.7%',
          icon: 'fa-users',
          color: '#3b82f6'
        }
      ]
    },
    
    // 客户标志配置
    showClientLogos: {
      type: Boolean,
      default: true
    },
    clientsTitle: {
      type: String,
      default: '值得信赖的合作伙伴'
    },
    clients: {
      type: Array,
      default: () => [
        { name: '客户1', logoUrl: 'https://picsum.photos/seed/client1/120/40' },
        { name: '客户2', logoUrl: 'https://picsum.photos/seed/client2/120/40' },
        { name: '客户3', logoUrl: 'https://picsum.photos/seed/client3/120/40' },
        { name: '客户4', logoUrl: 'https://picsum.photos/seed/client4/120/40' },
        { name: '客户5', logoUrl: 'https://picsum.photos/seed/client5/120/40' }
      ]
    }
  },
  
  data() {
    return {
      isLoading: false,
      originalData: null
    };
  },
  
  computed: {
    // 标题样式
    titleStyle() {
      return {
        // 可以根据需要添加动态标题样式
      };
    },
    
    // 描述文本样式
    descriptionStyle() {
      return {
        // 可以根据需要添加动态描述样式
      };
    }
  },
  
  mounted() {
    // 保存原始数据用于重置
    this.backupOriginalData();
    
    // 自动加载数据
    if (this.autoLoad && this.dataSourceUrl) {
      this.loadDataFromSource();
    }
  },
  
  watch: {
    // 监听数据源URL变化，自动重新加载数据
    dataSourceUrl: {
      handler(newUrl, oldUrl) {
        if (newUrl && newUrl !== oldUrl && this.autoLoad) {
          this.loadDataFromSource();
        }
      },
      immediate: false
    }
  },
  
  methods: {
    /**
     * 获取背景样式
     */
    getBackgroundStyles() {
      const styles = {};
      
      if (this.backgroundType === 'solid') {
        styles.backgroundColor = this.bgColor;
      } else {
        // 渐变色背景
        styles.background = `linear-gradient(to bottom right, ${this.bgColor}80, ${this.bgColor2}90)`;
      }
      
      return styles;
    },
    
    /**
     * 获取主按钮样式
     */
    getPrimaryButtonStyles() {
      const baseStyles = {
        backgroundColor: this.primaryColor,
        color: '#ffffff',
        border: 'none'
      };
      
      // 悬停样式
      baseStyles['--hover-bg'] = this.getColorWithOpacity(this.primaryColor, 0.9);
      
      // 根据按钮样式调整
      switch (this.primaryButton.buttonStyle) {
        case 'rounded':
          baseStyles.borderRadius = '30px';
          break;
        case 'flat':
          baseStyles.backgroundColor = 'transparent';
          baseStyles.color = this.primaryColor;
          baseStyles.border = `1px solid ${this.primaryColor}`;
          baseStyles['--hover-bg'] = this.getColorWithOpacity(this.primaryColor, 0.1);
          break;
        default: // filled
          baseStyles.borderRadius = '8px';
      }
      
      return baseStyles;
    },
    
    /**
     * 获取次要按钮样式
     */
    getSecondaryButtonStyles() {
      return {
        backgroundColor: 'transparent',
        color: this.primaryColor,
        border: `1px solid ${this.primaryColor}`,
        '--hover-bg': this.getColorWithOpacity(this.primaryColor, 0.1)
      };
    },
    
    /**
     * 处理按钮点击事件
     */
    handleButtonClick(buttonType) {
      const button = buttonType === 'primary' ? this.primaryButton : this.secondaryButton;
      
      // 触发相应的事件
      this.$emit(`${buttonType}ButtonClick`, {
        button,
        timestamp: new Date().getTime()
      });
      
      // 如果有链接，执行跳转
      if (button.link) {
        if (button.link.startsWith('#')) {
          // 页面内锚点跳转
          const targetId = button.link.substring(1);
          const targetElement = document.getElementById(targetId);
          if (targetElement) {
            targetElement.scrollIntoView({ behavior: 'smooth' });
          }
        } else {
          // 外部链接跳转
          window.location.href = button.link;
        }
      }
    },
    
    /**
     * 处理客户标志图片加载错误
     */
    handleImageError(event, index) {
      // 替换为默认图片
      event.target.src = `https://picsum.photos/seed/fallback${index}/120/40`;
      
      // 触发错误事件
      this.$emit('imageError', {
        index,
        error: event.error
      });
    },
    
    /**
     * 处理主图片加载错误
     */
    handleMainImageError(event) {
      // 替换为默认图片
      event.target.src = 'https://picsum.photos/seed/fallbackhero/800/600';
      
      // 触发错误事件
      this.$emit('imageError', {
        index: -1,
        error: event.error
      });
    },
    
    /**
     * 设置主题色
     */
    setPrimaryColor(color) {
      this.primaryColor = color;
    },
    
    /**
     * 更新标题
     */
    updateTitle(titleLines) {
      this.titleLines = titleLines;
    },
    
    /**
     * 设置背景类型
     */
    setBackgroundType(type) {
      if (['solid', 'gradient'].includes(type)) {
        this.backgroundType = type;
      }
    },
    
    /**
     * 辅助方法：获取带透明度的颜色
     */
    getColorWithOpacity(color, opacity) {
      // 简单处理，实际项目中可能需要更完善的颜色处理
      if (color.startsWith('#') && color.length === 7) {
        const alpha = Math.round(opacity * 255).toString(16).padStart(2, '0');
        return `${color}${alpha}`;
      }
      return color;
    },
    
    /**
     * 从数据源加载数据
     */
    async loadDataFromSource(url = this.dataSourceUrl) {
      if (!url) {
        console.warn('数据源URL为空，无法加载数据');
        return;
      }
      
      this.isLoading = true;
      
      try {
        const response = await fetch(url);
        if (!response.ok) {
          throw new Error(`HTTP错误! 状态码: ${response.status}`);
        }
        
        const data = await response.json();
        
        // 更新组件数据
        this.updateHeroData(data);
        
        // 触发数据加载成功事件
        this.$emit('dataLoaded', {
          data,
          timestamp: new Date().getTime()
        });
        
      } catch (error) {
        console.error('从数据源加载数据失败:', error);
        
        // 触发数据加载失败事件
        this.$emit('dataLoadError', {
          error,
          timestamp: new Date().getTime()
        });
        
      } finally {
        this.isLoading = false;
      }
    },
    
    /**
     * 更新Hero数据
     */
    updateHeroData(data) {
      // 根据API返回的数据结构更新组件的各个属性
      if (data) {
        // 更新颜色配置
        if (data.primaryColor) this.primaryColor = data.primaryColor;
        if (data.accentColor) this.accentColor = data.accentColor;
        if (data.highlightColor) this.highlightColor = data.highlightColor;
        if (data.backgroundType) this.backgroundType = data.backgroundType;
        if (data.bgColor) this.bgColor = data.bgColor;
        if (data.bgColor2) this.bgColor2 = data.bgColor2;
        
        // 更新内容配置
        if (data.showTag !== undefined) this.showTag = data.showTag;
        if (data.tagText) this.tagText = data.tagText;
        if (data.titleLines) this.titleLines = data.titleLines;
        if (data.description) this.description = data.description;
        if (data.contentAlignment) this.contentAlignment = data.contentAlignment;
        
        // 更新按钮配置
        if (data.primaryButton) this.primaryButton = data.primaryButton;
        if (data.showSecondaryButton !== undefined) this.showSecondaryButton = data.showSecondaryButton;
        if (data.secondaryButton) this.secondaryButton = data.secondaryButton;
        
        // 更新图片配置
        if (data.mainImageUrl) this.mainImageUrl = data.mainImageUrl;
        if (data.mainImageAlt) this.mainImageAlt = data.mainImageAlt;
        if (data.imageHoverEffect !== undefined) this.imageHoverEffect = data.imageHoverEffect;
        if (data.showDecorations !== undefined) this.showDecorations = data.showDecorations;
        
        // 更新统计卡片配置
        if (data.showStatCards !== undefined) this.showStatCards = data.showStatCards;
        if (data.stats) this.stats = data.stats;
        
        // 更新客户标志配置
        if (data.showClientLogos !== undefined) this.showClientLogos = data.showClientLogos;
        if (data.clientsTitle) this.clientsTitle = data.clientsTitle;
        if (data.clients) this.clients = data.clients;
      }
    },
    
    /**
     * 刷新数据
     */
    refresh() {
      this.loadDataFromSource();
    },
    
    /**
     * 保存原始数据
     */
    backupOriginalData() {
      this.originalData = {
        primaryColor: this.primaryColor,
        accentColor: this.accentColor,
        highlightColor: this.highlightColor,
        backgroundType: this.backgroundType,
        bgColor: this.bgColor,
        bgColor2: this.bgColor2,
        showTag: this.showTag,
        tagText: this.tagText,
        titleLines: JSON.parse(JSON.stringify(this.titleLines)),
        description: this.description,
        contentAlignment: this.contentAlignment,
        primaryButton: JSON.parse(JSON.stringify(this.primaryButton)),
        showSecondaryButton: this.showSecondaryButton,
        secondaryButton: JSON.parse(JSON.stringify(this.secondaryButton)),
        mainImageUrl: this.mainImageUrl,
        mainImageAlt: this.mainImageAlt,
        imageHoverEffect: this.imageHoverEffect,
        showDecorations: this.showDecorations,
        showStatCards: this.showStatCards,
        stats: JSON.parse(JSON.stringify(this.stats)),
        showClientLogos: this.showClientLogos,
        clientsTitle: this.clientsTitle,
        clients: JSON.parse(JSON.stringify(this.clients))
      };
    },
    
    /**
     * 恢复原始数据
     */
    restoreOriginalData() {
      if (this.originalData) {
        Object.assign(this, this.originalData);
      }
    },
    
    /**
     * 加载数据（action方法）
     */
    loadData(url = null) {
      this.loadDataFromSource(url || this.dataSourceUrl);
    },
    
    /**
     * 刷新数据（action方法）
     */
    refreshData() {
      this.refresh();
    }
  }
};
</script>

<style scoped>
/* 按钮悬停样式 */
a[style*="--hover-bg"]:hover {
  background-color: var(--hover-bg) !important;
}

/* 图片加载过渡 */
img {
  transition: opacity 0.3s ease-in-out;
}

img[src=""] {
  opacity: 0;
}

img[src]:not([src=""]) {
  opacity: 1;
}

/* 响应式调整 */
@media (max-width: 1024px) {
  .container {
    max-width: 90%;
  }
}

@media (max-width: 768px) {
  /* 移动端隐藏悬浮卡片 */
  .absolute.z-20 {
    display: none !important;
  }
  
  /* 调整按钮大小 */
  a[class*="px-8"] {
    padding-left: 6px !important;
    padding-right: 6px !important;
  }
  
  /* 调整刷新按钮位置 */
  button[title="刷新数据"] {
    top: 2px;
    right: 2px;
    padding: 1px;
  }
}
</style>
    